<html data-layout-decorator="layout/form">
<div data-layout-fragment="content">
    <form class="layui-form model-form" action="" style="width:80%;">
        <input name="id" type="hidden" th:value="${info['id']?:0}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章封面：</label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag">
                        <a href="javascript:void(0);">
                        <img id="cover_show_id" th:src="${info['cover']?:'/assets/images/default_upload.png'}" alt="上传图片" width="90" height="90">
                    </a>
                        <input type="hidden" id="cover" name="cover" th:value="${info['cover']}"></div>
                    <div style="margin-top:10px;">
                        <button type="button" class="layui-btn" id="btnUploadImg_cover"><i
                                class="layui-icon">&#xe67c;</i>上传封面
                        </button>
                    </div>
                    <div class="layui-form-mid layui-word-aux">建议尺寸：建议上传尺寸450x450</div>
                </div>
                <style type="text/css">.layui-upload-drag {
                    position: relative;
                    padding: 10px;
                    border: 1px dashed #e2e2e2;
                    background-color: #fff;
                    text-align: center;
                    cursor: pointer;
                    color: #999;
                }</style>
                <script th:inline="javascript" type="text/javascript">layui.use(['upload', 'croppers'], function () {
                    //声明变量
                    var layer = layui.layer
                        , upload = layui.upload
                        , croppers = layui.croppers
                        , $ = layui.$;

                    if (true) {

                        //图片裁剪组件
                        croppers.render({
                            elem: '#btnUploadImg_cover'
                            , name: "cover"
                            , saveW: 450     //保存宽度
                            , saveH: 450
                            , mark: 1.0 / 1    //选取比例
                            , area: ['750px', '500px']  //弹窗宽度
                            , url: "/upload/uploadImage?name=article"
                            , done: function (url) {
                                //上传完毕回调
                                $('#cover').val(url);
                                $('#cover_show_id').attr('src', url);
                            }
                        });

                    } else {

                        /**
                         * 普通图片上传
                         */
                        var uploadInst = upload.render({
                            elem: '#btnUploadImg_cover'
                            , url: "/upload/uploadImage?name=article"
                            , accept: 'images'
                            , acceptMime: 'image/*'
                            , exts: "jpg|png|gif|bmp|jpeg"
                            , field: 'file'//文件域字段名
                            , size: 1024 * 1024 //最大允许上传的文件大小
                            , before: function (obj) {
                                //预读本地文件
                            }
                            , done: function (res) {
                                //上传完毕回调

                                if (res.code != 0) {
                                    layer.msg(res.msg, {icon: 5});
                                    return false;
                                }

                                //上传成功
                                $('#cover_show_id').attr('src', res.data);
                                $('#cover').val(res.data);
                            }
                            , error: function () {
                                //请求异常回调
                                return layer.msg('数据请求异常');
                            }
                        });

                    }

                });</script>
            </div>
        </div>
        <div class="layui-form-item" style="width: 625px;">
            <label class="layui-form-label">文章标题：</label>
            <div class="layui-input-block">
                <input name="title" th:value="${info['title']}" lay-verify="required" autocomplete="off" placeholder="请输入文章标题"
                       class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <select name='status' id='status' lay-verify='required' lay-search='' lay-filter='status'>
                        <option value=''>【请选择状态】</option>
                        <!--<option value='1'>已审核</option>-->
                        <!--<option value='2' selected=''>待审核</option>-->
                        <!--<option value='3'>审核失败</option>-->
                        <option th:each="item:${statusList}" th:value="${item.key}" th:text="${item.value}"  th:selected="${item.key} == ${info['status']}"></option>

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否置顶：</label>
                <div class="layui-input-inline">
                    <!--<input name="isTop" id="isTop" th:value="${info.isTop}" lay-skin="switch" lay-filter="isTop" lay-text="已置顶|未置顶"-->
                           <!--type="checkbox" th:checked="${info.isTop==2}?false:true">-->
                    <!--<script th:inline="javascript" type="text/javascript">layui.use(['form'], function () {-->
                        <!--var form = layui.form,-->
                            <!--$ = layui.$;-->

                        <!--if (1 == 1) {-->
                            <!--$("#isTop").attr('type', 'hidden').val(1);-->
                        <!--} else {-->
                            <!--$("#isTop").attr('type', 'hidden').val(2);-->
                        <!--}-->
                        <!--form.on('switch(isTop)', function (data) {-->
                            <!--console.log('switch开关选择状态：' + this.checked);-->
                            <!--$(data.elem).attr('type', 'hidden').val(this.checked ? 1 : 2);-->
                        <!--});-->
                    <!--});</script>-->




                    <input name="isTop" id="isTop" th:value="${info['isTop']}" lay-skin="switch" lay-filter="isTop"
                           lay-text="置顶|未置顶" type="checkbox" th:checked="${info['isTop']}==2?'false':'true'">
                    <script th:inline="javascript" type="text/javascript">
                        layui.use(['form'], function () {
                            var form = layui.form,
                                $ = layui.$;

                            if (1 == 1) {
                                $("#isTop").attr('type', 'hidden').val(1);
                            } else {
                                $("#isTop").attr('type', 'hidden').val(2);
                            }
                            form.on('switch(isTop)', function (data) {
                                console.log('switch开关选择状态：' + this.checked);
                                $(data.elem).attr('type', 'hidden').val(this.checked ? 1 : 2);
                            });
                        });
                    </script>

                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章图集：</label>

            <div class="layui-upload-drag" th:each="item:${imgList}">
                <div class="del_img" onclick="remove_image_imgs(this);"><img src="/assets/images/delete.png"></div>
                <img name="img_src_imgs" th:src="${item}" src="http://images.javaweb.vip//images/article/20210129/20210129134025108.jpg" width="90" height="90"></a>
            </div>


            <div class="layui-upload-drag img_upload_imgs">
                <img id="btnUploadImg_imgs" src="/assets/images/default_upload.png" alt="上传文章图集" title="上传文章图集" width="90" height="90">
                <input type="hidden" id="imgs" name="imgs" th:value="${info['imgs']}">
            </div>
            <style type="text/css">.layui-upload-drag {
                position: relative;
                padding: 10px;
                border: 1px dashed #e2e2e2;
                background-color: #fff;
                text-align: center;
                cursor: pointer;
                color: #999;
                margin-right: 10px;
                margin-bottom: 10px;
            }

            .del_img {
                position: absolute;
                z-index: 99;
                right: 0;
                top: 0;
                width: 25px;
                height: 25px;
                display: block;
            }

            .del_img img {
                position: absolute;
                z-index: 9;
                right: 0px;
                top: 0px;
                width: 25px;
                height: 25px;
                display: inline-block;
            }</style>
            <script th:inline="javascript" type="text/javascript">layui.use(['upload', 'croppers'], function () {
                //声明变量
                var layer = layui.layer
                    , upload = layui.upload
                    , croppers = layui.croppers
                    , $ = layui.$;
                // 初始化图片隐藏域
                var ids = '';
                $('img[name="img_src_imgs"]').each(function () {
                    ids += $(this).attr('src') + ","
                });
                ids = ids.substr(0, (ids.length - 1));
                $("#imgs").val(ids);

                if (true == 1) {
                    // 图片裁剪组件
                    croppers.render({
                        elem: '#btnUploadImg_imgs'
                        , name: "imgs"
                        , saveW: 450     //保存宽度
                        , saveH: 450
                        , mark: 1.0    //选取比例
                        , area: ['750px', '500px']  //弹窗宽度
                        , url: "/upload/uploadImage?name=article"
                        , done: function (url) {
                            // 如果上传失败
                            if (!url) {
                                return layer.msg('上传失败');
                            }

                            var hideStr = $("#imgs").attr("value");
                            var itemArr = hideStr.split(',');
                            if (itemArr.length >= "10") {
                                layer.msg("最多上传10张图片", {icon: 5, time: 1000}, function () {
                                    //TODO...
                                });
                                return false;
                            }

                            // 渲染界面
                            var attStr = '<div class="layui-upload-drag">' +
                                '<div class="del_img" onclick="remove_image_imgs(this);">' +
                                '<img src="/assets/images/delete.png"></img>' +
                                '</div>' +
                                '<a href="' + url + '" target="_blank">' +
                                '<img name="img_src_imgs" src="' + url + '" alt="文章图集(点击放大预览)" title="文章图集(点击放大预览)" width="90" height="90">' +
                                '</a>' +
                                '</div>';
                            $(".img_upload_imgs").before(attStr);

                            // 获取最新的图集
                            var ids = '';
                            $('img[name="img_src_imgs"]').each(function () {
                                ids += $(this).attr('src') + ","
                            });
                            ids = ids.substr(0, (ids.length - 1));
                            // 给隐藏域赋值
                            $("#imgs").val(ids);

                            return false;
                        }
                    });

                } else {
                    /**
                     * 普通图片上传
                     */
                    var uploadInst = upload.render({
                        elem: '#btnUploadImg_imgs'
                        , url: "/upload/uploadImage?name=article"
                        , accept: 'images'
                        , acceptMime: 'image/*'
                        , exts: "jpg|png|gif|bmp|jpeg"
                        , field: 'file'//文件域字段名
                        , size: 10 * 1024 //最大允许上传的文件大小
                        , multiple: true
                        , number: 10 //最大上传张数
                        , before: function (obj) {
                            //预读本地文件

                        }
                        , done: function (res) {
                            //上传完毕回调

                            var hideStr = $("#imgs").attr("value");
                            var itemArr = hideStr.split(',');
                            if (itemArr.length >= 10) {
                                layer.msg("最多上传10张图片", {icon: 5, time: 1000}, function () {
                                    //TODO...
                                });
                                return false;
                            }

                            //如果上传失败
                            if (res.status <= 0) {
                                return layer.msg('上传失败');
                            }

                            //渲染界面
                            var attStr = '<div class="layui-upload-drag">' +
                                '<div class="del_img" onclick="remove_image_imgs(this);">' +
                                '<img src="/assets/images/delete.png"></img>' +
                                '</div>' +
                                '<a href="' + res.data + '" target="_blank">' +
                                '<img name="img_src_imgs" src="' + res.data + '" alt="文章图集(点击放大预览)" title="文章图集(点击放大预览)" width="90" height="90">' +
                                '</a>' +
                                '</div>';
                            $(".img_upload_imgs").before(attStr);

                            //获取最新的图集
                            var ids = '';
                            $('img[name="img_src_imgs"]').each(function () {
                                ids += $(this).attr('src') + ","
                            });
                            ids = ids.substr(0, (ids.length - 1));
                            //给隐藏域赋值
                            $("#imgs").val(ids);

                            return false;
                        }
                        , error: function () {
                            //请求异常回调
                            return layer.msg('数据请求异常');
                        }
                    });

                }
            });

            // 删除图片
            function remove_image_imgs(obj) {
                //obj.remove();
                layui.$(obj).parent().remove();

                //获取最新的图集
                var ids = '';
                layui.$('img[name="img_src_imgs"]').each(function () {
                    ids += layui.$(this).attr('src') + ","
                });
                ids = ids.substr(0, (ids.length - 1));
                //给隐藏域赋值
                layui.$("#imgs").val(ids);
            }
            </script>
        </div>
        <div class="layui-form-item" style="width: 625px;">
            <label class="layui-form-label">文章导读：</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="文章导读" class="layui-textarea" th:text="${info['description']}"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章内容：</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入文章内容" th:text="${info['content']}" class="layui-textarea"></textarea>
                <link rel="stylesheet" href="/assets/libs/kindeditor/themes/default/default.css">
                <link rel="stylesheet" href="/assets/libs/kindeditor/plugins/code/prettify.css">
                <script type="text/javascript" src="/assets/libs/kindeditor/kindeditor-all-min.js"></script>
                <script type="text/javascript" src="/assets/libs/kindeditor/lang/zh-CN.js"></script>
                <script type="text/javascript" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
                <style type="text/css">
                    form {
                        margin: 0;
                    }

                    textarea {
                        display: block;
                    }
                </style
                >
                <script th:inline="javascript" type="text/javascript">KindEditor.ready(function (K) {
                    var editor = K.create('textarea[name="content"]', {
                        width: "100%",
                        height: 350,
                        cssPath: '/assets/libs/kindeditor/plugins/code/prettify.css',
                        uploadJson: '/upload/kindeditorImage?name=article',
                        fileManagerJson: '',
                        allowFileManager: true,
                        filePostName: "file",
                        afterCreate: function () {
                            var self = this;
                            K.ctrl(document, 13, function () {
                                self.sync();
                            });
                            K.ctrl(self.edit.doc, 13, function () {
                                self.sync();
                            });
                        },
                        //关键所在，当失去焦点时执行this.sync()，同步输入的值到textarea中;
                        afterBlur: function () {
                            this.sync();
                        }
                    });
                    prettyPrint();
                });</script>
            </div>
        </div>
        <div class="layui-form-item text-center model-form-footer">
            <button class="layui-btn" lay-filter="submitForm" lay-submit>立即保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </form>
</div>
</html>